<template>
  <div>
    <Tabs>
      <TabPane label="订单列表">
        <List :current="current" :columns="columns" :data="orders.orders.data.recordList"
              :total="orders.orders.data.totalCount"
              @on-change="handlePageChange">
          <ListHeader>
            <ListSearch>
              <Form :model="search" inline>
                <Form-item>
                  <Input type="text" placeholder="请输入商户订单号" v-model="search.orderNo" style="width: 150px;"
                         @on-enter="get(1)"/>
                </Form-item>
                <Form-item>
                  <Select v-model="search.status" style="width:120px;border-radius:16px" placeholder="请选择订单状态"
                          @on-change="get(1)">
                    <Option value="" key="">全部</Option>
                    <Option v-for="item in this.statusArr" :value="item.name" :key="item.desc">
                      {{ item.desc }}
                    </Option>
                  </Select>
                </Form-item>
                <!--                <Form-item>
                                  <Select v-model="search.payWayCode" style="width:120px;border-radius: 16px" placeholder="请选择支付方式"
                                          @on-change="get(1)">
                                    <Option value="" key="">全部</Option>
                                    <Option v-for="item in this.payWayCodeArr" :value="item.name" :key="item.desc">
                                      {{item.desc}}
                                    </Option>
                                  </Select>
                                </Form-item>-->
                <Form-item>
                  <Select v-model="search.payTypeCode" style="width:150px;border-radius: 16px" placeholder="请选择支付类型"
                          @on-change="get(1)">
                    <Option value="" key="">全部</Option>
                    <Option v-for="item in this.payTypeCodeArr" :value="item.name" :key="item.desc">
                      {{ item.desc }}
                    </Option>
                  </Select>
                </Form-item>
                <!--                <Form-item>
                                  <Select v-model="search.channelCode" style="width:150px;border-radius: 16px" placeholder="请选择支付渠道"
                                          @on-change="get(1)">
                                    <Option value="" key="">全部</Option>
                                    <Option v-for="item in this.channelCodeArr" :value="item.name" :key="item.desc">
                                      {{ item.desc }}
                                    </Option>
                                  </Select>
                                </Form-item>-->
                <Form-item>
                  <DatePicker v-model="dateVal" format="yyyy/MM/dd" type="daterange" placement="bottom-end"
                              :options="options"
                              placeholder="选择日期" style="width: 180px"
                              @on-change="handleSearch"></DatePicker>
                </Form-item>
                <Form-item>
                  <Button type="primary" shape="circle" @click="get(1)">查询</Button>
                </Form-item>
              </Form>
            </ListSearch>
          </ListHeader>
        </List>
        <div style="height: 100px;"></div>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import consts from '@/utils/consts'
  import List, {ListHeader, ListOperations, ListSearch} from '@/components/List'
  import OrderDetail from '@/components/OrderDetail'
  import header from '@/components/header'
  import time from '@/utils/helpers/timeLite'
  import storage from '@/utils/helpers/storageLite'
  import Model from '@/models/apps'

  export default {
    name: 'summary',
    components: {
      List,
      ListHeader,
      ListOperations,
      ListSearch,
      OrderDetail
    },
    data () {
      return {
        statusArr: '',
        payWayCodeArr: '',
        payTypeCodeArr: '',
        channelCodeArr: '',
        search: {
          orderNo: '',
          beginDate: time.getDate(new Date()),
          endDate: time.getDate(new Date()),
          status: '',
          payTypeCode: ''
        },
        current: 1,
        dateVal: [new Date(), new Date()],
        options: {
          disabledDate (date) {
            return date.valueOf() > new Date().valueOf()
          },
          shortcuts: [
            {
              text: '最近一周',
              value () {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                return [start, end]
              }
            },
            {
              text: '最近一个月',
              value () {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                return [start, end]
              }
            },
            {
              text: '最近三个月',
              value () {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                return [start, end]
              }
            }
          ]
        },
        columns: [
          {
            title: '商户订单号',
            key: 'orderNo',
            width: 140
          },
          {
            title: '商品说明',
            key: 'subject',
            width: 160
          },
          {
            title: '金额(元)',
            key: 'amount',
            width: 80
          },
          {
            title: '状态',
            key: 'status',
            render (h, params) {
              var arr = new Array(0)
              arr['SUCCESS'] = '交易成功'
              arr['FAILED'] = '交易失败'
              arr['CLOSED'] = '交易关闭'
              arr['CREATED'] = '订单已创建'
              arr['CANCELED'] = '订单已撤销'
              arr['WAITING_PAYMENT'] = '等待支付'
              return h('span', null, arr[params.row.status])
            }
          },

          {
            title: '支付方式',
            key: 'payWayName'
          },
          {
            title: '支付类型',
            key: 'payTypeName'
          },
          {
            title: '支付渠道',
            key: 'channelName'
          },
          {
            title: '下单时间',
            key: 'createTime',
            width: 160,
            render (h, params) {
              return h('span', null, time.getDateTime(params.row.createTime))
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 90,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '8px'
                  },
                  on: {
                    click: () => {
                      this.$router.push('/appCenter/' + this.$route.params.id + '/orderDetail/' + params.row.id)
                    }
                  }
                }, '查看详情')
              ])
            }
          }
        ]
      }
    },
    computed: mapState({
      'orders': state => state.orders,
      'allApps': state => state.allApps,
      getCurrentApp (state) {
        return state.allApps.currentApp
      }
    }),
    watch: {
      getCurrentApp (val) {
        this.get()
      }
    },
    created () {
      this.get()
      this.getSearchParams()
    },
    methods: {
      get (current = 1) {
        this.$set(this, 'current', current)
        this.$store.dispatch('getOrders', {
          params: {
            current: current,
            limit: consts.PAGE_SIZE,
            appId: this.$route.params.id,
            userNo: storage.get('userNo'),
            ...this.search
          }
        })
      },
      getSearchParams () {
        new Model('allSearchParams')
          .GET({
            params: {
              userNo: storage.get('userNo'),
              appId: this.$route.params.id
            }
          })
          .then((res) => {
            // https://segmentfault.com/a/1190000010121051
            this.statusArr = res.data.data.statusEnums
            this.payTypeCodeArr = res.data.data.PayTypeEnums
          })
      },
      handlePageChange (current) {
        this.get(current)
      },
      handleSearch (val) {
        if (val[0] === null || val[0] === '') {
          this.search.beginDate = time.getDate(new Date())
          this.search.endDate = time.getDate(new Date())
        } else {
          this.search.beginDate = time.getDate(val[0])
          this.search.endDate = time.getDate(val[1])
        }
        this.get()
      }
    }
  }
</script>

<style>
</style>
